@page "/scheduler/external-drag-and-drop"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Navigations

@inherits SampleBaseComponent;

<SampleDescription>
   <p> This example illustrates how to drag and drop the events from an external source into Scheduler. Here, you can drag and drop the items from TreeView control into Scheduler.</p> 
</SampleDescription>
<ActionDescription>
   <p>In this example, <code>ResourceHeaderTemplate</code> is used to change the default appearance of the resource header column. Within the <code>OnActionBegin</code> event of Scheduler, the dragged item from the TreeView control is removed,
      when it is being dragged and dropped onto the Scheduler. When the item is being dropped onto the Scheduler, the event editor is explicitly made to open with the target details by invoking the <code>OpenEditor</code> method of Scheduler within the <code>OnNodeDragged</code> event of TreeView. </p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <div class="schedule-container e-droppable">
            <div class="title-container">
                <h1 class="title-text">Doctor's Appointments</h1>
            </div>
            <SfSchedule TValue="ScheduleData.HospitalData" @ref="ScheduleRef" Width="100%" Height="650px" CssClass="schedule-drag-drop" @bind-SelectedDate="@CurrentDate">
                <ScheduleEvents TValue="ScheduleData.HospitalData" OnActionBegin="OnActionBegin"></ScheduleEvents>
                <ScheduleGroup EnableCompactView="false" Resources="@Resources"></ScheduleGroup>
                <ScheduleResources>
                    <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@Departments" Field="DepartmentID" Title="Department" Name="Departments" TextField="Text" IdField="Id" ColorField="Color"></ScheduleResource>
                    <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@Consultants" Field="ConsultantID" Title="Consultant" Name="Consultants" TextField="Text" IdField="Id" ColorField="Color" GroupIDField="GroupId" AllowMultiple="false"></ScheduleResource>
                </ScheduleResources>
                <ScheduleViews>
                    <ScheduleView MaxEventsPerRow="1" Option="View.TimelineDay"></ScheduleView>
                    <ScheduleView MaxEventsPerRow="1" Option="View.TimelineMonth"></ScheduleView>
                </ScheduleViews>
                <ScheduleWorkHours Highlight="true" Start="08:00" End="18:00"></ScheduleWorkHours>
                <ScheduleEventSettings DataSource="@DataSource">
                    <ScheduleField>
                        <FieldSubject Name="Name" Title="Patient Name"></FieldSubject>
                        <FieldStartTime Name="StartTime" Title="From"></FieldStartTime>
                        <FieldEndTime Name="EndTime" Title="To"></FieldEndTime>
                        <FieldDescription Name="Description" Title="Reason"></FieldDescription>
                    </ScheduleField>
                </ScheduleEventSettings>
            </SfSchedule>
        </div>
        <div class="treeview-container">
            <div class="title-container">
                <h2 class="title-text">Waiting List</h2>
            </div>
            <SfTreeView TValue="ScheduleData.HospitalData" @ref="TreeViewRef" AllowDragAndDrop="true" CssClass="treeview-external-drag" DropArea=".content-wrapper">
                <TreeViewEvents TValue="ScheduleData.HospitalData" OnNodeDragStop="OnTreeViewDragStop"></TreeViewEvents>
                <TreeViewFieldsSettings DataSource="@TreeViewData" Id="Id" Text="Name"></TreeViewFieldsSettings>
                <TreeViewTemplates TValue="ScheduleData.HospitalData">
                    <NodeTemplate>
                        <div id="waiting">
                            <div id="waitdetails">
                                <div id="waitlist">@((context as ScheduleData.HospitalData).Name)</div>
                                <div id="waitcategory">@((context as ScheduleData.HospitalData).DepartmentName) - @((context as ScheduleData.HospitalData).Description)</div>
                            </div>
                        </div>
                    </NodeTemplate>
                </TreeViewTemplates>
            </SfTreeView>
        </div>
    </div>
</div>

@code{
    private DateTime CurrentDate = new DateTime(2020, 1, 6);
    SfSchedule<ScheduleData.HospitalData> ScheduleRef;
    SfTreeView<ScheduleData.HospitalData> TreeViewRef;
    public List<ScheduleData.HospitalData> DataSource = new ScheduleData().GetHospitalData();
    public List<ScheduleData.HospitalData> TreeViewData = new ScheduleData().GetWaitingListData();
    public string[] Resources = new string[] { "Departments", "Consultants" };
    public ScheduleData.HospitalData DraggedItem { get; set; }
    private List<ResourceData> Departments { get; set; } = new List<ResourceData> {
        new ResourceData { Text = "GENERAL", Id = 1, Color = "#bbdc00" },
        new ResourceData { Text = "DENTAL", Id = 2, Color = "#9e5fff" }
    };
    private List<ResourceData> Consultants { get; set; } = new List<ResourceData> {
        new ResourceData { Text = "Alice", Id = 1, GroupId = 1, Color = "#bbdc00", Designation = "Cardiologist" },
        new ResourceData { Text = "Nancy", Id = 2, GroupId = 2, Color = "#9e5fff", Designation = "Orthodontist" },
        new ResourceData { Text = "Robert", Id = 3, GroupId = 1, Color = "#bbdc00", Designation = "Optometrist" },
        new ResourceData { Text = "Robson", Id = 4, GroupId = 2, Color = "#9e5fff", Designation = "Periodontist" },
        new ResourceData { Text = "Laura", Id = 5, GroupId = 1, Color = "#bbdc00", Designation = "Orthopedic" },
        new ResourceData { Text = "Margaret", Id = 6, GroupId = 2, Color = "#9e5fff", Designation = "Endodontist" }
    };
    public class ResourceData
    {
        public string Text { get; set; }
        public int Id { get; set; }
        public int GroupId { get; set; }
        public string Color { get; set; }
        public string Designation { get; set; }
    }
    public async void OnTreeViewDragStop(DragAndDropEventArgs args)
    {
        args.Cancel = true;
        CellClickEventArgs cellData = await ScheduleRef.GetTargetCellAsync((int)args.Left, (int)args.Top);
        if (cellData != null)
        {
            var resourceDetails = ScheduleRef.GetResourceByIndex(cellData.GroupIndex);
            Random rnd = new Random();
            int Id = rnd.Next(1000);
            ScheduleData.HospitalData TreeData = TreeViewData.Where(data => data.Id.ToString() == args.DraggedNodeData.Id).First();
            ScheduleData.HospitalData eventData = new ScheduleData.HospitalData
            {
                Id = Id,
                Name = TreeData.Name,
                StartTime = cellData.StartTime,
                EndTime = cellData.EndTime,
                IsAllDay = cellData.IsAllDay,
                ConsultantID = resourceDetails.GroupData.ConsultantID,
                DepartmentID = resourceDetails.GroupData.DepartmentID,
                Description = TreeData.Description,
                DepartmentName = TreeData.DepartmentName
            };
            await ScheduleRef.OpenEditorAsync(eventData, CurrentAction.Add);
            DraggedItem = TreeData;
        }
    }
    public void OnActionBegin(ActionEventArgs<ScheduleData.HospitalData> args ) {
        if (args.ActionType == ActionType.EventCreate && DraggedItem != null)
        {
            TreeViewData.Remove(DraggedItem);
            DraggedItem = null;
        }
    }
}
<style>
    /* custom code start*/
    .content-wrapper {
        display: -ms-flexbox;
        display: flex;
    }

    .e-device-hover {
        background-color: #e0e0e0 !important;
    }

    .schedule-container {
        padding-right: 10px;
        width: 100%;
    }

    .title-container {
        padding-bottom: 10px;
    }

    .title-text {
        font-size: 18px;
        margin: 0px;
        font-weight: bold;
        text-align: center;
    }
    /* custom code end*/
    .treeview-external-drag #waiting {
        height: 100%;
        padding: 0;
    }

    .treeview-external-drag #waitid {
        float: left;
        width: 13%;
        text-align: center;
        line-height: 30px;
        font-size: 13px;
        font-family: "Segoe UI";
        color: #f9920b;
        overflow: hidden;
        margin: 9px 0;
        padding: 0 2px 0 0;
    }

    .treeview-external-drag #waitdetails {
        width: 95%;
        float: left;
        height: 100%;
        padding: 0;
    }

    .treeview-external-drag #waitlist {
        width: 100%;
        height: 50%;
        font-weight: bold;
        font-family: "Segoe UI";
        font-size: 12px;
        color: #545554;
        padding: 5px 0 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .highcontrast #waitlist {
        color: white;
    }

    .highcontrast .e-drag-item #waitlist {
        color: black !important;
    }
    
    .treeview-external-drag #waitcategory {
        height: 50%;
        font-family: "Segoe UI";
        font-size: 10px;
        color: #545554;
        opacity: 0.6;
        padding-left: 10px;
        padding-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .highcontrast #waitcategory {
        color: white;
    }

    .highcontrast .e-drag-item #waitcategory {
        color: black !important;
    }

    .treeview-external-drag .e-list-text,
    .e-bigger .treeview-external-drag .e-list-text {
        background: white;
        border: 0.5px solid #E1E7EC;
        height: 50px;
        line-height: 15px;
        padding: 0 5px;
        width: 220px;
    }

    .highcontrast .treeview-external-drag .e-list-text,
    .highcontrast .e-bigger .treeview-external-drag .e-list-text {
        background: none;
    }
    .treeview-external-drag .e-list-parent,
    .e-bigger .treeview-external-drag .e-list-parent {
        height: 100%;
        padding: 0 2px;
    }

    .treeview-external-drag .e-list-item,
    .e-bigger .treeview-external-drag .e-list-item {
        height: 100%;
        padding: 0 0 5px 0;
    }

    .treeview-external-drag .e-fullrow,
    .e-bigger .treeview-external-drag .e-fullrow {
        height: 55px;
    }

    .treeview-external-drag .e-list-item.e-hover > .e-fullrow,
    .treeview-external-drag .e-list-item.e-active > .e-fullrow,
    .treeview-external-drag .e-list-item.e-active.e-hover > .e-fullrow,
    .e-bigger .treeview-external-drag .e-list-item.e-hover > .e-fullrow,
    .e-bigger .treeview-external-drag .e-list-item.e-active > .e-fullrow,
    .e-bigger .treeview-external-drag .e-list-item.e-active.e-hover > .e-fullrow {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none !important;
    }

    .treeview-external-drag .e-text-content,
    .e-bigger .treeview-external-drag .e-text-content {
        padding: 0;
    }

    .e-drag-item.e-treeview.treeview-external-drag,
    .e-bigger .e-drag-item.e-treeview.treeview-external-drag {
        padding: 0 !important;
    }

    .e-schedule.schedule-drag-drop .e-timeline-view .e-resource-left-td,
    .e-schedule.schedule-drag-drop .e-timeline-month-view .e-resource-left-td {
        width: 160px;
    }

    .e-schedule.schedule-drag-drop .e-resource-cells.e-parent-node .specialist-category {
        padding-left: 30px
    }

    .e-schedule.e-rtl.schedule-drag-drop .e-resource-cells.e-parent-node .specialist-category {
        padding-right: 30px
    }

    .e-schedule.schedule-drag-drop .e-resource-cells.e-child-node .specialist-category,
    .e-schedule.schedule-drag-drop .e-resource-cells.e-child-node .specialist-name {
        padding: 5px
    }

    .e-schedule.schedule-drag-drop .e-resource-cells.e-parent-node .specialist-name {
        padding: 0 10px
    }

    .e-schedule.schedule-drag-drop .e-resource-cells.e-child-node .specialist-category .specialist-image {
        width: 45px;
        height: 40px;
        float: left;
        border-radius: 50%;
        margin-right: 10px;
    }

    .e-schedule.schedule-drag-drop .specialist-name {
        font-size: 13px;
    }

    .e-schedule.schedule-drag-drop .specialist-designation {
        font-size: 10px;
    }

    .e-schedule-dialog .e-all-day-time-zone-row,
    .e-schedule-dialog .e-location-container,
    .e-bigger .e-schedule-dialog .e-all-day-time-zone-row,
    .e-bigger .e-schedule-dialog .e-location-container {
        display: none;
    }

    .e-schedule-dialog .e-subject-container,
    .e-bigger .e-schedule-dialog .e-subject-container {
        padding-right: 0;
        width: 100%;
    }

    .e-schedule-dialog.e-rtl .e-subject-container,
    .e-bigger .e-schedule-dialog.e-rtl .e-subject-container {
        padding-left: 0;
    }

    @@media (max-width: 550px) {
        /* custom code start*/
        .content-wrapper {
            display: block;
        }

        .schedule-container {
            padding-bottom: 10px
        }
        /* custom code end*/
        .treeview-external-drag.e-treeview,
        .e-bigger .treeview-external-drag.e-treeview {
            width: 225px;
        }

            .e-bigger .treeview-external-drag.e-treeview.e-drag-item {
                position: relative !important;
            }
    }
</style>